/**
参考网址：https://blog.csdn.net/qq_28613375/article/details/131495851

OpenLayers 鼠标自由绘制元素（画点、画线、画面、画圆）
*/
<template>
    <div>
        <div ref="map" class="map"></div>
        <div class="btns">
            <button @click="drawPoint">画点</button>
            <button @click="drawLine">画线</button>
            <button @click="drawPolygon">画面</button>
            <button @click="drawCircle">画圆</button>
            <button @click="drawCircle">画圆</button>
            <button @click="clearDraw">清空</button>
            <button @click="exitDraw">退出</button>
        </div>
    </div>
</template>

<script>
    import "ol/ol.css";
    import Map from "ol/Map";
    import View from "ol/View";
    import TileLayer from "ol/layer/Tile";
    import { fromLonLat } from "ol/proj";
    import XYZ from "ol/source/XYZ";
    import Draw from "ol/interaction/Draw";
    import VectorSource from "ol/source/Vector";
    import VectorLayer from "ol/layer/Vector";

    export default {
        name: "OlMap",
        data() {
            return {
                map: null,
                draw: null,
                source: new VectorSource()
            };
        },
        mounted() {
            // 创建地图
            this.createMap();
        },
        methods: {
            createMap() {
                // 创建ArcGIS World Street Map图层
                const arcGISLayer = new TileLayer({
                    source: new XYZ({
                        url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}"
                    })
                });

                // 创建矢量图层
                const vector = new VectorLayer({
                    source: this.source
                });

                // 创建地图容器
                this.map = new Map({
                    target: this.$refs.map,
                    layers: [arcGISLayer, vector],
                    view: new View({
                        center: fromLonLat([120, 30]),
                        zoom: 8
                    })
                });
            },
            addInteraction(type) {
                // 添加交互绘制控件
                this.draw = new Draw({
                    source: this.source,
                    type: type
                });
                this.map.addInteraction(this.draw);
            },
            drawPoint() {
                //退出其他绘制
                this.exitDraw();
                // 绘制点
                this.addInteraction("Point");
            },
            drawLine() {
                //退出其他绘制
                this.exitDraw();
                // 绘制线
                this.addInteraction("LineString");
            },
            drawPolygon() {
                //退出其他绘制
                this.exitDraw();
                // 绘制面
                this.addInteraction("Polygon");
            },
            drawCircle() {
                //退出其他绘制
                this.exitDraw();
                // 绘制圆
                this.addInteraction("Circle");
            },
            clearDraw() {
                // 清空绘制
                this.source.clear();
            },
            exitDraw() {
                // 退出绘制模式
                if (this.draw) {
                    this.map.removeInteraction(this.draw);
                    this.draw = null;
                }
            },

        }
    };
</script>

<style scoped>
    .map {
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
    }

    .btns {
        position: fixed;
        top: 100px;
        left: 200px;
    }
</style>